<template>
  <div ref="scroll-wrapper" class="wrapper" id="hotshowing">
    <div>
      <MovieItem v-for="o in dataset.movieList" :key="o.id" :item="o"></MovieItem>
    </div>
  </div>
</template>

<script>
import MovieItem from "./movieItem"
import { getHotShowing } from "@/api/movie"
import { Indicator, Toast } from "mint-ui"
import "mint-ui/lib/style.css"
import BScroll from "@better-scroll/core"
import Pullup from "@better-scroll/pull-up"
import { mapMutations } from "vuex"
BScroll.use(Pullup)

export default {
  data() {
    return {
      reachEnd: false,
      start: 0,
      limit: 5,
      dataset: {
        movieList: []
      }
    }
  },
  methods: {
    ...mapMutations(["SET_SHOW_AD"]),
    initScroll() {
      if (this.scroll) {
        this.scroll.refresh()
        return
      }

      this.scroll = new BScroll(this.$refs["scroll-wrapper"], {
        click:true,
        scrollY: true,
        pullUpLoad: true
      })

      this.scroll.on("scroll", postion => {
        console.log(postion)
        //ad广告 隐藏
        if (postion.y < -50) {
          this.SET_SHOW_AD(false)
        } else {
          this.SET_SHOW_AD(true)
        }
      })

      this.scroll.on("pullingUp", () => this.getHotShowinglist())
    },

    async getHotShowinglist() {
      if (this.reachEnd) {
        Toast({
          message: "没有更多的数据了",
          position: "bottom",
          duration: 3000
        })
        this.scroll.finishPullUp()
        return
      }

      Indicator.open()

      let rs = await getHotShowing({ _start: this.start, _limit: this.limit })
      if (this.start === 0) {
        this.dataset.movieList = rs.data
      } else {
        this.dataset.movieList.push(...rs.data)
      }

      if (rs.data.length < this.limit) {
        this.reachEnd = true
      }

      this.$nextTick(() => {
        Indicator.close()
        this.initScroll()
        this.scroll.finishPullUp()
        this.start += this.limit
      })
    }
  },

  async created() {
    this.getHotShowinglist()
  },
  components: {
    MovieItem
  },
  activated(){
    console.log('hotshowing activated ...')
  },
  deactivated(){
     console.log('hotshowing deactivated ...')
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  flex: 1;
  overflow: hidden;
}
</style>


